<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <title>Document</title>
    <style>
        .preview{
            position: relative;
            height: 450px;
            width: 450px;
            border: 1px solid #ccc;
        }
        .preview .preview_img{
            height: 100%;
            width: 100%;
        }
        .preview .mask{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
            width: 200px;
            background-color: rosybrown;
            opacity: .3;
        }
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            height: 500px;
            width: 500px;
            overflow: hidden;
        }
        .big .bigImg{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.addEventListener('load',function(){
            var preview = document.querySelector('.preview');
            var mask = document.querySelector('.mask')
            var big = document.querySelector('.big');
            preview.addEventListener('mouseover',function(){
                mask.style.display = 'block';
                big.style.display = 'block';
                preview.addEventListener('mousemove',function(e){
                    preview.style.cursor = 'move';
                    var x = e.pageX - mask.offsetWidth/2 - preview.offsetLeft;
                    var y = e.pageY - mask.offsetHeight/2 - preview.offsetTop;

                    //遮罩层最大移距
                    var mastMax = preview.offsetWidth-mask.offsetWidth;

                    if(x<=0){
                        x = 0;
                    }else if(x>=mastMax){
                        x=mastMax;
                    }
                    if(y<=0){
                        y=0;
                    }else if(y>=mastMax){
                        y = mastMax;//因为是正方形 长宽都相同
                    }
                    mask.style.left = x + 'px';
                    mask.style.top = y + 'px';

                    //算出 左边小图 和 右边大图的 等比比例
                    //公式如下 遮罩层移动距离/遮罩层最大移动距离 = 大图移动距离/大图最大移动距离
                    
                    //大图移动距离 = 遮罩层移动距离 * 大图最大移动距离 / 遮罩层最大移距
                    //大图 img 标签
                    var bigImg = document.querySelector('.bigImg');
                    // 大图最大移动距离
                    var bigMax = bigImg.offsetWidth - big.offsetWidth;
                    //大图的移动距离
                    var bigX = x * bigMax / mastMax
                    var bigY = y * bigMax / mastMax
                    bigImg.style.top = '-' + bigY + 'px';
                    bigImg.style.left = '-' + bigX + 'px';
                })    
                preview.addEventListener('mouseout',function(e){
                    mask.style.display = 'none';
                    big.style.display = 'none';            
                })
                big.addEventListener('mouseover',function(){
                    mask.style.display = 'none';
                    big.style.display = 'none';
                })
            },true);
        });
    </script>
</head>
<body>
    <div class="box">
        <div class="preview">
            <img src="images/1.jpg" alt="" class="preview_img">
            <div class="mask"></div>
            <div class="big">
                <img src="images/bigimg.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
</body>
</html>